@import "./common.less";

// 电影详情
.detail-box {
    position: absolute;
    top: 0;
    bottom: @bottomHeight;
    left: 0;
    right: 0;
    overflow-y: auto;

    // 电影名称
    .film-name {
        padding: 0.3rem;
        padding-bottom: 0;
        font-size: 0.38rem;
        color: @gray-dark;
    }

    // 电影信息
    .film-info {
        // css 新布局方式 grid 网格异形布局
        // 浏览器内核已做全面兼容
        color: @gray-dark;
        display: grid;
        grid-template-columns: 2fr 1fr;
        padding: 0 0.2rem 0.3rem 0.2rem;
        > .film-tip {
            grid-column-start: 1;
            grid-column-end: 2;
            > .comment-count {
                display: grid;
                grid-template-columns: 4fr 2fr;
                margin: 0.2rem0;
                align-items: center;
                > .film-source {
                    grid-column-start: 1;
                    grid-column-end: 2;
                }
                > .star-count {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    font-size: 0.3rem;
                }
            }
            > .film-desc {
                font-size: 0.26rem;
                height: 2.4rem;
                overflow: hidden;
                padding-right: 0.2rem;
                line-height: 0.5rem;
                > p > span {
                    color: @blue;
                    padding-right: 0.1rem;
                }
            }
        }
        > .film-img {
            height: 3.4rem;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 4%;
            background-color: @gray-light;
        }
    }

    // 电影简介
    .film-plot {
        color: @gray-dark;
        padding: 0 0.2rem 0.3rem 0.2rem;
        > .plot-title {
            font-size: 0.36rem;
            color: @gray;
            margin-bottom: 0.2rem;
        }
        > .plot-content {
            font-size: 0.24rem;
            text-indent: 0.56rem;
            line-height: 0.4rem;
        }
    }

    // 演员阵容
    .film-actor {
        color: @gray-dark;
        padding-bottom: 0.3rem;
        font-size: 0;
        > .actor-title {
            font-size: 0.36rem;
            color: @gray;
            padding: 0 0.2rem;
            margin-bottom: 0.2rem;
        }
        .actor-list {
            white-space: nowrap;
            width: 100%;
            overflow-x: auto;
            &::after {
                content: '';
                width: 0.2rem;
                display: inline-block;
            }
            > .actor-item {
                width: 1.6rem;
                padding-left: 0.2rem;
                display: inline-block;
                vertical-align: top;
                > .actor-img {
                    background-color: @gray-light;
                    width: 1.6rem;
                    height: 2.2rem;
                    background-repeat: no-repeat;
                    background-size: cover;
                }
                > .actor-name {
                    white-space: pre-wrap;
                    margin: 0.1rem0;
                    font-size: 0.24rem;
                    text-align: center;
                }
            }
        }
    }

    // 电影评论
    .film-comments {
        color: @gray-dark;
        padding-bottom: 0.3rem;
        font-size: 0;
        > .comment-title {
            font-size: 0.36rem;
            color: @gray;
            padding: 0 0.2rem;
            margin-bottom: 0.2rem;
        }
        > .comment-list {
            width: 100%;
            padding-bottom: 0.1rem;
        }
    }
    .comment-item {
        display: grid;
        grid-template-columns: 1fr 6fr;
        grid-template-rows: auto auto;
        padding: 0 0.2rem 0.6rem 0.2rem;
        > .user-img {
            width: 100%;
            > img {
                width: 100%;
                height: auto;
                border-radius: 50%;
            }
        }
        > .user-info {
            font-size: 0.3rem;
            padding-left: 0.2rem;
            > .user-name {
                margin-top: 0.1rem;
                > .film-source {
                    float: right;
                }
            }
            > .user-time {
                margin-top: 0.1rem;
                font-size: 0.26rem;
                color: @gray;
            }
        }
        > .user-conent {
            font-size: 0.24rem;
            text-indent: 0.56rem;
            line-height: 0.4rem;
            grid-column-start: 2;
            grid-column-end: 3;
            padding-left: 0.2rem;
        }
    }
}

// 底部评论区
.footer-box {
    position: absolute;
    bottom: 0;
    // background-color: red;
    height: @bottomHeight;
    width: 100%;
    border-top: 1px solid @gray-light;
    > .comment-input {
        font-size: 0.24rem;
        margin: 0.2rem;
        background-color: @gray-ee;
        height: @bottomHeight - 0.4rem;
        line-height: @bottomHeight - 0.4rem;
        border-radius: 1000rem;
        cursor: pointer;
        color: @gray;
        padding: 0 0.2rem;
    }
    > .comment-detail {
        position: fixed;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        max-width: 750px;
        display: none;
        background-color: fade(black, 50%);
        > .user-input {
            position: absolute;
            bottom: 0;
            max-height: 100%;
            left: 0;
            right: 0;
            padding: 0.2rem;
            background-color: #f8f9fa;
            overflow-y: auto;
            box-sizing: border-box;
            > h4 {
                font-size: 0.28rem;
                font-weight: normal;
                // padding: 0.1rem;
                color: @gray;
                padding-bottom: 0.1rem;
            }
            > .user-head {
                list-style: none;
                font-size: 0;
                width: 100%;
                overflow-y: scroll;
                height: 2rem;
                background-color: #ddd;
                border-radius: 0.2rem;
                margin-bottom: 0.2rem;
                > li {
                    display: inline-block;
                    background-repeat: no-repeat;
                    width: 0.8rem;
                    height: 0.8rem;
                    margin: 0.1rem;
                    box-sizing: border-box;
                    background-size: cover;
                    border-radius: 50%;
                    vertical-align: top;
                }
                > .user-choose::after {
                    content: '';
                    background-image: url();
                    display: inline-block;
                    width: 0.8rem;
                    height: 0.8rem;
                    background-repeat: no-repeat;
                    background-size: 80%;
                    background-position: center;
                    background-color: fade(black, 70%);
                    border-radius: 50%;
                }
            }
            > .user-nikename {
                box-sizing: border-box;
                border: none;
                background-color: #ddd;
                display: block;
                font-size: 0.24rem;
                padding: 0.2rem 0.2rem;
                width: 100%;
                border-radius: 0.2rem;
                outline: none;
                margin-bottom: 0.2rem;
            }
            > .reset-star {
                margin-bottom: 0.2rem;
                > span {
                    height: 0.4rem !important;
                    width: 0.4rem !important;
                    line-height: 0.4rem !important;
                }
                > .star-source {
                    font-size: 0.52rem !important;
                    color: @gray!important;
                }
            }
            .user-message {
                outline: none;
                border: none;
                display: block;
                width: 100%;
                background-color: #ddd;
                font-size: 0.24rem;
                padding: 0.2rem 0.2rem;
                border-radius: 0.2rem;
                box-sizing: border-box;
                height: 2rem;
                margin-bottom: 0.2rem;
                resize: none;
            }
            .send-btn {
                color: @gray;
                font-size: 0.3rem;
                &::after {
                    content: '';
                    display: block;
                    clear: both;
                }
                > span {
                    padding: 0.1rem 0.2rem;
                    cursor: pointer;
                }
                > span:first-child {
                    float: left;
                }
                > span:last-child {
                    float: right;
                }
            }
        }
    }
}
